<!--
 * 权限设置
-->
<template>
    <ChromeTab :tab-list="tabList" :value="currentTab" @handle-tabs="changeTab" />
    <component :is="reactiveComponent[currentTab as keyof typeof reactiveComponent]" />
</template>

<script setup lang="ts">
import ChromeTab from '@/components/chrome-tab/index.vue'

const currentTab = ref('Role')
const tabList = [
    {
        label: '角色管理',
        name: 'Role',
    },
    {
        label: '管理员列表',
        name: 'Admin',
    },
]

const changeTab = (value: any) => {
    if (value) currentTab.value = value
}
const reactiveComponent = {
    Role: defineAsyncComponent(() => import('./RoleList.vue')),
    Admin: defineAsyncComponent(() => import('./AdminList.vue')),
}
</script>

<style scoped lang="scss"></style>
